<template>
	<view class="content">
		<nav-view :defaultShow="true" :backShow="false"></nav-view>
		<view class="page-conte">
			<view class="header-box">
				<!-- <image class="bg" src="../../static/images/home-bg.png" mode="widthFix"></image> -->
				<image class="bg" src="http://bbs.weizhenguose.com/attachment/images/3/2023/04/D90DQB9P0be1EQRP9WsOqXdRi9pZEz.png" mode="widthFix"></image>
				<view class="search-view-box">
					<view class="search-top-box is-flex">
						<i class="iconfont icon-jindunlogo-01"></i>
						<text class="name">金盾</text>
					</view>
					<view class="search-conte-box is-flex" @click="gotoSearch">
						<i class="iconfont icon-sousuo-01"></i>
						<input class="input" disabled="true" type="text" placeholder="请描述您的法律问题">
					</view>
				</view>
				<image class="icon-yy" src="../../static/images/home-yy.png" mode="widthFix"></image>
			</view>
			<view class="host-box">
				<view class="host-title-box is-flex">
					<text class="title">热点搜索</text>
					<i class="t-icon t-icon-shouye-remen-01"></i>
				</view>
				<view class="host-conte-box">
					<view class="list-view">
						<view class="item is-flex" v-for="(item,index) in list" :key="index" @click="touchSearch(item)">
							<text class="num">{{index + 1}}、</text>
							<text class="conte">{{item.article_title}}</text>
						</view>
					</view>
				</view>
				<view class="host-title-box is-flex" @click="gotoConsult">
					<text class="title">我要留言</text>
					<i class="t-icon t-icon-shouye-liuyan-01"></i>
				</view>
				<view class="home-img"  @click="gotoConsult">
					<!-- <image class="img" src="../../static/images/home-ly.png" mode="widthFix"></image> -->
					<image class="img" src="http://bbs.weizhenguose.com/attachment/images/3/2023/04/OZYI3QIRctuZst8r6g1E2UHYriiCzi.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<tabbar :pagePath="'pages/index/index'"></tabbar>
	</view>
</template>

<script>
	import tabbar from '../component/tabbar/tabbar.vue'
	export default {
		components:{tabbar},
		data() {
			return {
				title: 'Hello',
				// list:['AI作画生成的图片和作品，版权归谁','教育培训机构涉嫌诈骗该怎么办?','葛优打“葛优躺”官司获赔759万，肖像权是什么','消费者权益有哪些','银行倒闭存款怎么办']
				list:[]
			}
		},
		onLoad() {
			
			this.getList();
		},
		methods:{
			touchSearch(item){
				uni.navigateTo({
					url:'/pages/search/answer?keywords=' + item.article_title
				})
			},
			gotoSearch(){
				uni.navigateTo({
					url:'/pages/search/index'
				})
			},
			getList() {
				let self = this;
				self._get('index/getHotSearch', {}, function(res) {
					self.list = res.data.list;
					
				});
			},
			gotoConsult(){
					uni.navigateTo({
						url:'/pages/onlineMessage/index?article_id=0&consultId=0'
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}
	.content {
		min-height: 100%;
		background: linear-gradient(180deg, #C6DBFE 0%, #EAF0FB 100%);
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	}
	.page-conte {
		height: 100%;
		padding-top: 40upx;
		position: relative;
	}
	.header-box {
		position: relative;
	}
	.header-box .bg {
		width: 100%;
	}
	.search-view-box {
		position: absolute;
		left: 0;
		bottom: 26upx;
		width: 100%;
		z-index: 10;
		padding: 0 40upx;
	}
	.icon-yy {
		position: absolute;
		right: 0;
		bottom: 0;
		margin-bottom: -20upx;
		z-index: 12;
		width: 87upx;
	}
	.search-top-box {
		width: 169upx;
		height: 69upx;
		background: #232DA7;
		border-radius: 13upx 13upx 0upx 0upx;
		justify-content: center;
		font-size: 35upx;
		color: #fff;
		line-height: 50upx;
	}
	.search-top-box .iconfont {
		font-size: 50upx;
		margin-right: 5upx;
	}
	.search-conte-box {
		height: 106upx;
		border-radius: 0rpx 13rpx 13rpx 13rpx;
		border: 4rpx solid #232DA7;
		padding: 0 34upx;
		background-color: #fff;
	}
	.search-conte-box .iconfont {
		font-size: 55upx;
	}
	.search-conte-box .input {
		flex: 1;
		padding-left: 30upx;
	}
	.host-box {
		margin-top: 27upx;
		padding: 0 40upx;
	}
	.host-title-box {
		justify-content: flex-start;
	}
	.host-title-box .title {
		font-size: 45upx;
		color: #001353;
		font-weight: bold;
		margin-right: 15upx;
	}
	.host-title-box .t-icon {
		width: 56upx;
		height: 56upx;
	}
	.host-conte-box {
		margin-top: 30upx;
		border-radius: 13upx;
		padding: 20upx 40upx;
		background-color: #fff;
		margin-bottom: 50upx;
	}
	.list-view{
		font-size: 28rpx;
	}
	.list-view .item {
		justify-content: flex-start;
		padding: 16upx 0;
		align-items: initial;
	}
	.home-img {
		margin-top: 20upx;
		margin-bottom: 120upx;
	}
	.home-img .img {
		width: 100%;
	}
</style>
